<html>
<head>
  <title>ExplorerCanvas Text Case</title>
    <script type="text/javascript" src="../../../jooscript.js"></script><script type="text/javascript" src="../../../fxcanvas.js"></script><!--[if IE]><script type="text/javascript" src="../../../flash_backend.js"></script><![endif]--><comment><script type="text/javascript" src="../../../canvas_backend.js"></script></comment>
  <script>
    // Safari is known not to handle resizing well, expect this to
    // compare to Firefox

    var cv, ctx, size = 80;
    var img, src = "../examples/ff.jpg";

    function a() {
      cv = document.getElementById("aa");
      ctx = cv.getContext("2d");

      cv.onload = function (img_) {
        img = img_;
        // there is the fix:
        // use oncanvasframe frame instead of setInterval
        cv.oncanvasframe = l;
      };
      cv.loadImages(src)
    }

    function l() {
      size = (size + 1) % 800;
      cv.width = Number(size + 200);
      cv.height = Number((size + 200) / 2);

      // Firefox autoclears the canvas at this point

      ctx.save();
      ctx.translate(50, 50);
      ctx.scale(0.1, 0.1);
      ctx.rotate(size/800 * Math.PI*8);
      ctx.drawImage(img, 0, -75);
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(cv.width, cv.height);
      ctx.moveTo(20, 20);
      ctx.lineTo(80, 20);
      ctx.lineTo(80, 80);
      ctx.lineTo(20, 80);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.scale(size / 200, size / 200);
      ctx.arc(100, 50, 20, 0, Math.PI, true);
      ctx.fill();
      ctx.restore();

    }
  </script>
  <style>
    canvas {
      background-color:#eee;
    }
  </style>
</head>
<body onload="a();">
<canvas id="aa" width="200" height="200" frameDuration="50">Fallback <b>content</b> markup</canvas>
</body>
</html>
